<template>
  <!--  :class="[{rotate1:!,reserve:metalBar}]"-->
  <div>
    <div class="content">
      <img :src="data.al.picUrl" alt="">
    </div>
    <div class="song-bg"
    ></div>
    <van-icon name="arrow-left" size="25" color="#fff" @click="$router.back()"/>
    <div class="topIcon" :class="[{rotate1:TheAnimationControl},[metalBar?'reserve':'']]" id="topIcon">
    </div>
    <div class="centerBox" ref="centerBox" :class="{rotate2:TheAnimationControl}">
      <div class="opticalDisk">
        <van-image
          :src="data.al.picUrl"
          round
          width="170px"
          height="170px"
        />
        <van-image
          @click="startFn"
          class="start"
          round
          width="61px"
          height="61px"
          :src="require('./img/start.png')"
        />
      </div>
    </div>
    <audio
      ref="audio"
      preload="true"
      :src="`https://music.163.com/song/media/outer/url?id=${songId}.mp3`"
    ></audio>
  </div>
</template>

<script>
import { songDetail } from '@/api/Play'
// obj: {
//   backgroundImage: this.data.al.picUrl
// }
export default {
  name: 'Play',
  data () {
    return {
      metalBar: false,
      TheAnimationControl: false,
      songId: 0,
      data: {},
      once: 1

    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      this.songId = this.$route.params.id
      const res = await songDetail(this.songId)
      this.data = res.data.songs[0]
    },
    startFn () {
      if (this.once === 1) {
        this.once++
        this.TheAnimationControl = !this.TheAnimationControl
      }
      if (this.$refs.audio.paused) { // 判断当前的状态是否为暂停，若是则点击播放，否则暂停
        this.metalBar = false
        this.$refs.audio.play()
        this.$refs.centerBox.style.animationPlayState = 'running'
      } else {
        this.metalBar = true
        this.$refs.audio.pause()
        this.$refs.centerBox.style.animationPlayState = 'paused'
      }
    }
  }
}

</script>

<style scoped>
.content {

  filter: blur(15px);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.content img {
  width: 150%;
  height: 150%;
  object-fit: cover;
}

.song-bg:before {
  content: " ";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.centerBox {
  transform-origin: center 50%;
  width: 272px;
  height: 272px;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  background: url('./img/bg.png') no-repeat center;
  background-size: 100%;
  z-index: 2
}

.van-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.start {
  opacity: .5;
}

.topIcon {
  position: absolute;
  top: 8px;
  left: 210px;
  width: 145px;
  height: 152px;
  transform: rotate(-38deg);
  z-index: 5;
  background: url("./img/needle-ab.png") no-repeat;
  background-size: contain;
  transform-origin: left Top;
}

.rotate1 {
  animation: topIcon 2s linear;
  transform: rotate(-3deg);
}

.rotate2 {
  animation: ai 5s linear infinite;
}

.reserve {
  transform: rotate(-38deg);
  animation: reserve 2s linear;

}

@keyframes topIcon {
  0% {
    transform: rotate(-38deg);
  }

  100% {
    transform: rotate(-3deg);
  }
}

@keyframes reserve {
  0% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(-38deg);
  }
}

@keyframes ai {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }

  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
</style>
